<template>
  <div
    class="rank-page"
    :style="{backgroundImage:'url('+require('../../assets/imgs/rank/bg.png')+') no-repeat'}"
  >
    <div class="rank-header">
      <img class="left" @click="$router.go(-1)" src="../../assets/imgs/rank/back.png" alt>
      <img class="right" @click="showTip=true" src="../../assets/imgs/rank/rule.png" alt>
      <div class="center" @click="showSelectType=true">风云榜</div>
    </div>
    <div class="rank-content">
      <div class="title">
        <div
          @click="onBankSelect(index)"
          :class="selectedRank === index?'activeTitle':'commonTitle'"
          v-for="(item, index) in titleList"
          :key="index"
        >{{item}}</div>
      </div>
      <div class="month">{{month}}</div>
      <div v-if="rankData.length>0" class="data-wrapper">
        <div class="rank-row">
          <div class="index">排名</div>
          <div class="name">用户名</div>
          <div class="beishu">{{rankTitle[selectedRank].thirdTitle}}</div>
          <div class="sum">{{rankTitle[selectedRank].forthTitle}}</div>
        </div>
        <div v-for="(item, index) in rankData" :key="index" class="rank-row">
          <div class="index">{{index+1}}</div>
          <div class="name">{{item.nickname}}</div>
          <div class="beishu">{{item.third}}</div>
          <div class="beishu">{{item.forth}}</div>
          <div class="sum">{{item.bonus_price}}</div>
        </div>
      </div>
      <div v-else class="no-data-wrapper">
        <img class="left" src="../../assets/imgs/rank/no-data.png" alt>
        <br>暂无数据...
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex';

export default {
  components: {
    // Attention,
    // Fans
  },
  data () {
    return {
      month: '',
      selectedRank: 0,
      titleList: ['土豪神榜', '暴击之家', '连红风云'],
      rankData: [],
      rankTitle: [
        {
          thirdTitle: '投注金额',
          forthTitle: '土豪神榜'
        },
        {
          thirdTitle: '倍数',
          forthTitle: '总金额'
        },
        {
          thirdTitle: '连红次数',
          forthTitle: '总金额'
        }
      ]
    };
  },
  created () {
    this.fetchData('getBonusRank');
  },
  methods: {
    ...mapActions({
      getBonusRank: 'match/getBonusRank',
      getBonusRateRank: 'match/getBonusRateRank',
      getContinuousBonusRank: 'match/getContinuousBonusRank'
    }),
    fetchData (api) {
      this[api]().then(res => {
        if (res) {
          const { month, lists } = res;
          this.month = month;
          let rankData = [];
          if (api === 'getBonusRank') {
            rankData = lists.map(({ total_price, bonus_price, ...left }) => ({
              third: total_price,
              forth: bonus_price,
              ...left
            }));
          } else if (api === 'getBonusRateRank') {
            rankData = lists.map(({ bonus_rate, bonus_price, ...left }) => ({
              third: bonus_rate,
              forth: bonus_price,
              ...left
            }));
          } else {
            rankData = lists.map(
              ({ continuous_bonus_num, continuous_bonus_price, ...left }) => ({
                third: continuous_bonus_num,
                forth: continuous_bonus_price,
                ...left
              })
            );
          }
          this.rankData = rankData;
        }
      });
    },
    onBankSelect (index) {
      this.selectedRank = index;
      if (index === 0) {
        this.fetchData('getBonusRank');
      } else if (index === 1) {
        this.fetchData('getBonusRateRank');
      } else {
        this.fetchData('getContinuousBonusRank');
      }
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../assets/styles/mixins.less";
.rank-page {
  background: url(../../assets/imgs/rank/bg.png) no-repeat;
  background-size: cover;
  height: 12.94rem;
  .rank-header {
    position: relative;
    background: #d44743;
    height: 0.8rem;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    .left {
      position: absolute;
      left: 0.2rem;
      height: 0.4rem;
    }
    .right {
      position: absolute;
      right: 0.2rem;
      height: 0.4rem;
    }
    .center {
      text-align: center;
      width: 3.2rem;
      font-weight: bold;
      font-size: 0.34rem;
      color: #fff;
    }
  }
  .rank-content {
    margin-top: 3rem;
    .title {
      font-weight: bold;
      font-size: 0.3rem;
      text-align: center;
      div {
        width: 1.83rem;
        height: 0.64rem;
        line-height: 0.64rem;
        display: inline-block;
        &:nth-child(2) {
          margin-left: 0.3rem;
          margin-right: 0.3rem;
        }
      }
      .activeTitle {
        background: url(../../assets/imgs/rank/bt-selected.png) no-repeat;
        color: #ffffff;
        background-size: cover;
      }
      .commonTitle {
        background: url(../../assets/imgs/rank/bt-unselected.png) no-repeat;
        background-size: cover;
      }
    }
    .month {
      margin-top: 0.2rem;
      margin-bottom: 0.2rem;
      text-align: center;
      color: #ffffff;
      font-size: 0.36rem;
    }
    .no-data-wrapper {
      text-align: center;
      color: #ffffff;
      font-size: 0.3rem;
      img {
        margin-top: 0.2rem;
        margin-bottom: 0.4rem;
        width: 2rem;
      }
    }
    .data-wrapper {
      margin: 0.2rem;
      background: #ffffff;
      height: 6rem;
      .rank-row {
        width: 6rem;
        line-height: 0.6rem;
        height: 0.6rem;
        text-align: center;
        margin: auto;
        div {
          display: inline-block;
        }
        &:first-child {
          color: #8b2725;
          .sum {
            color: #8b2725;
          }
        }
        &:nth-child(2) {
          .index {
            color: #ffffff;
            background: url(../../assets/imgs/rank/rankf.png) no-repeat;
            background-size: 30% 80%;
            background-position: center;
          }
        }
        &:nth-child(3) {
          .index {
            color: #ffffff;
            background: url(../../assets/imgs/rank/ranks.png) no-repeat;
            background-size: 30% 80%;
            background-position: center;
          }
        }
        &:nth-child(4) {
          .index {
            color: #ffffff;
            background: url(../../assets/imgs/rank/rankt.png) no-repeat;
            background-size: 30% 80%;
            background-position: center;
          }
        }
        .index {
          width: 1rem;
          height: 0.6rem;
        }
        .name {
          width: 1.6rem;
          height: 0.6rem;
        }
        .beishu {
          width: 1.2rem;
        }
        .sum {
          width: 1.2rem;
          color: #e9595a;
        }
      }
    }
  }
}
</style>
